<template>
    <div ref="container"></div>
  </template>
  
  <script setup>
  import * as THREE from 'three'
  import {ref, nextTick} from 'vue'
  const container = ref(null);
  
  //添加一个场景
  const scene = new THREE.Scene();
  
  /**
   * @透视相机
   * new THREE.PerspectiveCamera(fov, aspect, near, far)
   * fov: 摄像机视锥体垂直视野角度，从视图的底部到顶部，以角度来表示
   * aspect: 摄像机视锥体的长宽比，通常是使用画布的宽/画布的高。默认值是1（正方形画布）
   * near: 摄像机的近端面
   * far: 摄像机的远端面
   */
  const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / (window.innerHeight - 50), 0.1, 1000 );
  /**
   * @设置相机位置
   * 表示对象局部位置的三维向量
   * camera.position.set(x, y, z);
   */
  camera.position.set(0, 0, 10);
  
  //把相机添加到场景中
  scene.add(camera)
  
  /**
   * @几何体
   * BoxGeometry: 立方缓冲几何体
   * new THREE.BoxGeometry(width, height, depth)
   * depth: 深度
   */
  const geometry = new THREE.BoxGeometry( 1, 1, 1 );
  
  /**
   * @材质
   * MeshBasicMaterial: 基础网格材质, 这种材质不受光照的影响
   * new THREE.MeshBasicMaterial( parameters)
   * parameters: 材质的任何属性都可以从此处传入(包括从Material继承的任何属性)
   */
  const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
  
  //根据几何体和材质创建物体
  const cube = new THREE.Mesh( geometry, material );
  
  //物体添加到场景中
  scene.add( cube );
  
  //创建一个渲染器
  const renderer = new THREE.WebGLRenderer();
  //渲染器尺寸大小
  renderer.setSize( window.innerWidth, (window.innerHeight - 50) );
  //动画循环
  function animate() {
      requestAnimationFrame( animate );
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    //使用渲染器，通过相机将场景渲染进来
      renderer.render( scene, camera );
  }
  
  nextTick(()=> {
    container.value.append( renderer.domElement )
    animate()
  })
  
  
  
  
  
  </script>
  
  
  <style scoped>
    .container{
      height: calc(100vh - 50px);
      width: 100vw;
      background: #ecf5ff;
    }
  </style>